<template>
  <div class="page-index">
    <div class="top">
      <RouterView v-slot="{ Component }">
        <KeepAlive :include="includes">
          <component :is="Component" />
        </KeepAlive>
      </RouterView>
    </div>
    <ul class="bottom">
      <!-- @vue-ignore -->
      <van-tabbar v-model="active" inactive-color="#b1b1b1" active-color="red">
        <van-tabbar-item name="films" to="/">
          <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive" />
          </template>
        </van-tabbar-item>

        <van-tabbar-item name="category" to="category">
          <template #icon="props">
            <img :src="props.active ? icon.active1 : icon.inactive1" />
          </template>
        </van-tabbar-item>

        <van-tabbar-item name="cart" to="cart">
          <template #icon="props">
            <img :src="props.active ? icon.active2 : icon.inactive2" />
          </template>
        </van-tabbar-item>

        <van-tabbar-item name="content" to="content">
          <template #icon="props">
            <img :src="props.active ? icon.active3 : icon.inactive3" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const active = ref(route.name)

watchEffect(() => {
  active.value = route.name
})

//计算 includes   拿到所有添加keepAlive属性的router
const includes = router
  .getRoutes()
  .filter((router) => router.meta.keepAlive)
  .map((item) => item.name!) as string[]
//导航栏图标
const icon = {
  active:
    'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/67550/26/12426/5094/5d9c4b13Eea435a3f/81328b0609c60a3c.png',
  inactive:
    'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/81741/30/12345/4140/5d9c4b13E726f0a1e/82c582e7c375e4b3.png',
  active1:
    'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/48787/24/12910/3390/5d9c4b12Ee63270e4/4481f5b3dbad979d.png',
  inactive1:
    'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56507/6/12787/3168/5d9c4b12Ef363dd8d/4af32f42575509d8.png',
  active2:
    'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/45205/32/12889/3890/5d9c4b12E7bc2c425/dd60fafbde8542ca.png',
  inactive2:
    'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/64954/4/12406/3529/5d9c4b12Ee7a82735/f2fe0a88bf344736.png',
  active3:
    'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/47480/36/12929/3209/5d9c4b13E97caa63a/4dc0ec8a7e47c2b7.png',
  inactive3:
    'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56206/13/12652/2957/5d9c4b13E503bcd76/1c8543653685e80e.png'
}

//取名字
defineOptions({
  name: 'index'
})
</script>

<style scoped>
.page-index {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
}

.top {
  flex: 1;
  overflow: hidden;
}

/* span {
  font-size: 12px;
  color: #b1b1b1;
} */

.bottom {
  height: 50px;
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

::v-deep(.van-tabbar-item__icon img) {
  display: block;
  height: 1.2rem;
  margin-top: 5px;
}

/* .bottom>li {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
} */
</style>
